<template>
    <div>
        3d化图片
        <div id="convas-container"></div>
    </div>
</template>
<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
export default {
    data() {
        return {

        }
    },
    methods: {
        Init() {
            let width = window.innerWidth; //窗口宽度
            let height = window.innerHeight; //窗口高度RGBELoader
            let k = width / height; //窗口宽高比
            let s = 1000; //三维场景显示范围控制系数，系数越大，显示的范围越大
            let DOM = document.getElementById("convas-container");
            // 创建画布
            const scene = new THREE.Scene();
            const renderer = new THREE.WebGLRenderer(
                {
                    antialias: true, // 设置抗锯齿
                }
            );
            renderer.setSize(300, 400);
            // 加载纹理
            const textureLoader = new THREE.TextureLoader();
            const texture = textureLoader.load("/img/food/food.jpg");
            const depthTexture = textureLoader.load("/img/food/food_depth.jpg");
            const mouse = new THREE.Vector2()
            // 创建平面
            const geometry = new THREE.PlaneGeometry(26.88, 40.32);
            // const material = new THREE.MeshBasicMaterial({map:texture});
            // 着色器材质
            const material = new THREE.ShaderMaterial({
                uniforms: {
                    uTime:{value:0},
                    uTexture: { value: texture },
                    uDepthTexture: { value: depthTexture },
                    uMouse: { value: mouse }
                },
                vertexShader: `
                    varying vec2 vUv;
                    void main() {
                    vUv = uv;
                    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
                }
                `,
                fragmentShader: `
                    uniform sampler2D uTexture;
                    uniform sampler2D uDepthTexture;
                    uniform vec2 uMouse;
                    varying vec2 vUv;
                    uniform float uTime;
                    void main() {
                        vec4 color = texture2D(uTexture, vUv);
                        vec4 depth = texture2D(uDepthTexture, vUv);
                        float depthValue = depth.r;
                        float x = vUv.x + (uMouse.x + sin(uTime)) * 0.01*depthValue;
                        float y = vUv.y+ (uMouse.y + cos(uTime)) * 0.01*depthValue;
                        vec4 newColor = texture2D(uTexture, vec2(x,y));
                        gl_FragColor = newColor;
                    }
                `
            });
            const plane = new THREE.Mesh(geometry, material);
            scene.add(plane);
            // 相机位置
            const camera = new THREE.PerspectiveCamera(45, 3 / 4, 0.1, s);
            camera.position.set(0, 0, 46); //设置相机位置
            camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

            // Dom添加
            DOM.appendChild(renderer.domElement);
            // 渲染场景
            (function fnAnimate(time) {
                material.uniforms.uMouse.value = mouse
                material.uniforms.uTime.value = performance.now() / 1000;

                renderer.render(scene, camera)
                requestAnimationFrame(fnAnimate);
            })()
            window.addEventListener("mousemove", (e)=>{
                mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
                mouse.y = (e.clientY / window.innerHeight) * 2 + 1;
            })
        },
    },
    mounted() {
        this.Init();
    },
}
</script>
<style></style>